<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        #div1{
            width: 100px;
            height: 100px;
            background-color: red;
        }

        /* #div1:hover{

             鼠标移动到元素之上的一个状态 
            background-color: green;
        } */
    </style>
</head>
<body>
    
    <!-- 行内式写法（不规范） -->
    <!-- <div id="div1" onclick="div1.style.backgroundColor='green'"></div> -->

    <div id="div1">123123</div>

    <script>

        // 什么是  web  api

        // api    application programming interface   应用程序 编程 接口
        // 系统给我们提供的一些提前准备好的方法  我们可以直接使用   不用取管里面据体的内容
        // 做功是用损耗   油-》 动力
        // 油 -》电  -》动力
        // 学会油门刹车就可以开车
        
        // web api 网络编程  
        // 浏览器给我们提供的一套用于操作浏览器以及页面元素的方法  

        // 案例1  
        // 咱们有一个div   现在想点击它  让他变个颜色
        
        // div1.onClick=function(){
        //     div1.style.backgroundColor='green';
        // };
        // console.log(div1);
        // javascript  专门提供了一组方法给我们寻找元素
        // 1. 寻找元素
        // document   文档（指的是当前这一个文件）
        // get   获取
        // element    元素
        // by      通过
        // id
        // a 属于一个web对象
        // web对象是web api 给我们提供的一个专有对象
        // 里面有很多属性和方法可以让我们设置
        var a=document.getElementById('div1');
        console.log(a);
        console.log(typeof a);
        // dir 方法可以展示web 对象的结构
        console.dir(a);
        a.onclick=function(){

            a.style.backgroundColor='green';
        }
       
    </script>
</body>
</html>